<template>
	<div class="ufoot">
		<div class="xhead">
			<img src="../../../../public/images/u3_1.png" >
			<h3>精选推荐</h3>
			<img src="../../../../public/images/u3_2.png" >
		</div>
		<div class="xbox">
			<ul>
				<li class="swiper-slide" v-for="item in ufootlist" :key="item.id">
					<article>
						<h4>{{item.type}}<span>|</span>{{item.city}}</h4>
						<img :src="item.imgURL" />
					</article>
					<aside>
						<h4>{{item.title}}</h4>
						<article>
							<p>
								<span>￥</span><strong>{{item.price}}</strong><span>起</span>
							</p>
							<p>
								{{item.day}}
							</p>
						</article>
					</aside>	
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Ufoot',
		data(){
			return{
				ufootlist:[
					{ id : 1,type:'休闲度假' ,city:'郑州出发', imgURL :'images/u3_3.jpg', title : '[无限风光•老君山]12-2月，赏景圣地老君山&中岳嵩山，千年古刹少林寺，北方溶洞鸡冠洞，伏牛十里画屏，看少林功夫，日出云海星空（4日深度游，河南赏风光）', price : 1580, day:'4天3晚'},
					{ id : 2,type:'休闲度假' ,city:'北京出发', imgURL :'images/u3_4.jpg', title : '[冰雪九寨环线]12-2月，避开旺季人群纷扰，邂逅冬日静谧九寨黄龙，撒欢毕棚沟，登达古冰川，两晚轻享九寨沟五星度假体验，打卡抖音同款华美达温泉酒店，冬游川西7日深度游！', price : 3150, day:'6天5晚'},
					{ id : 3,type:'' ,city:'沈阳出发', imgURL :'images/u3_5.jpg', title : '[冰雪阿尔山]12-2月沈阳，阿尔山国家森林公园，梦幻不冻河，查干湖冬捕，白狼镇雾凇长廊，鹿园，兴安敖包，乘坐雪国列车+打卡网红火车站+《亲爱的客栈》拍摄地，小众5日游）', price : 3180, day:'5天4晚'},
					{ id : 4,type:'休闲度假' ,city:'成都出发', imgURL :'images/u3_6.jpg', title : '[东北冰雪休闲]11-2月哈尔滨（冰雪首推路线），二浪河东北年味、雪乡尊享雪景房、长白山天池、镜泊湖冰瀑+冬捕、雾凇岛、雪地摩托+滑雪泡温泉+二人转+雪地烟花，年味7日', price : 4080, day:'7天6晚'},
					{ id : 5,type:'美景探索' ,city:'乌鲁木齐', imgURL :'images/u3_7.jpg', title : '[冰雪新疆]12-2月：雪国喀纳斯-水墨禾木-赛里木湖（蓝冰、冰泡）-人文伊宁-伊犁天鹅泉-独山子大峡谷-将军山滑雪场，品牌越野车/中巴考斯特+火车软卧，冰雪9日深度纯玩）', price : 5580, day:'9天8晚'},
					{ id : 6,type:'美景探索' ,city:'哈尔滨出发', imgURL :'images/u3_8.jpg', title : '[东北冰雪休闲]11-2月哈尔滨（冰雪首推路线），二浪河东北年味、雪乡尊享雪景房、长白山天池、镜泊湖冰瀑+冬捕、雾凇岛、雪地摩托+滑雪泡温泉+二人转+雪地烟花，年味7日', price : 3190, day:'7天6晚'},
					{ id : 7,type:'户外游' ,city:'宜昌出发', imgURL :'images/u3_9.jpg', title : '[三峡徒步]12月红叶季徒步圣地！漫步长江三峡，船行+徒步，从上帝视角俯瞰巴楚风韵，小众三峡流域轻装徒步穿越，避开人流，6日三峡秋景穿越之旅！', price : 2680, day:'6天5晚'},
					{ id : 8,type:'美景探索' ,city:'南宁出发', imgURL :'images/u3_10.jpg', title : '[田园靖西]11-3月暖冬季：南宁-通灵大峡谷-渠洋湖-靖西鹅泉-德天瀑布-明仕田园，4天3夜深度之旅！（批批入住明仕山庄）', price : 1480, day:'4天3晚'},
					{ id : 9,type:'摄影游' ,city:'乌鲁木齐出发', imgURL :'images/u3_11.jpg', title : '[北疆冬摄]12-2月新疆：雪国喀纳斯、水墨禾木，伊犁天鹅泉（天鹅+雾凇+晨雾），赛里木湖（蓝冰+冰泡+日出日落），伊宁人文，独山子大峡谷，乌尔禾魔鬼城，北疆摄影11日', price : 6680, day:'11天10晚'},
				]
			}
		}
	}
</script>

<style scoped>
	.ufoot{
		width: 100%;
		overflow: hidden;
	}
	.ufoot .xhead{
		padding-top: 0.5rem;
		width: 58%;
		margin: 0 auto;
		display: flex;
		align-items:center;
		justify-content: center;
	}
	.ufoot .xhead img{
		display: block;
		width:12%;
		height: 12%;
		background-size: 100%;
	}
	.ufoot .xhead h3{
		font-size: 0.4rem;
		font-weight: bold;
		margin: 0 0.1rem 0 0.15rem;
	}
	.ufoot .xbox{
		width: 100%;
		overflow: hidden;
	}
	.ufoot .xbox ul{
		width: 90%;
		margin: 0.3rem auto 0 ;
		overflow: hidden;
	}
	.ufoot .xbox ul li{
		width: 49%;
		height: 4.8rem;
		float: left;
	}
	.ufoot .xbox ul li:nth-child(even){
		float: right;	
	}
	.ufoot .xbox ul li img{
		width: 100%;
		height: 2.5rem;
		border-radius: 0.15rem;
		background-size: 100%;
	}
	.ufoot .xbox ul li article{
		position: relative;
		width: 100%;
	}
	.ufoot .xbox ul li:nth-child(3) article h4{
		position: absolute;
		width: 45%;
		height: 0.45rem;
		line-height: 0.45rem;
		text-indent: 0.1rem;
		margin-top: 0.15rem;
		color: white;
		border-radius: 0 0.16rem 0.16rem 0;
		background: rgba(0,0,0,0.6);
	}
	.ufoot .xbox ul li article h4{
		position: absolute;
		width: 75%;
		height: 0.45rem;
		line-height: 0.45rem;
		text-indent: 0.1rem;
		margin-top: 0.15rem;
		color: white;
		border-radius: 0 0.16rem 0.16rem 0;
		background: rgba(0,0,0,0.6);
	}
	.ufoot .xbox ul li article span{
		padding: 0 0.1rem 0  0.1rem;
	}
	.ufoot .xbox ul li aside h4{
		font-size: 0.35rem;
		line-height: 0.5rem;
		height: 1rem;
		/* 一行文字省略号: 省略号+溢出隐藏+禁止换行 [超出宽度溢出隐藏且同省略号代替] */
		/* overflow: hidden;
		text-overflow: ellipsis;  省略号
		word-spacing: normal; 禁止换行 */
		/* 多行文字做省略号:最后一行文字超过高度,溢出隐藏且用省略符合代替 */
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2; /* 高度有关 */
		/* 超出盒子外的文本用省略号代替 */
		-webkit-box-orient: vertical;
	}
	.ufoot .xbox ul li aside article{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0.15rem;
	}
	.ufoot .xbox ul li aside article p strong{
		margin-top: 0.2rem;
		font-size: 0.4rem;
		line-height: 0.6rem;
		color: #ff7100;
		font-weight: bold;
		margin-right: -0.1rem;
		margin-left: -0.1rem;
	}
	.ufoot .xbox ul li aside article p span:first-child{
		font-size: 0.1rem;
		color: #ff7100;
		font-weight: normal;
	}
	.ufoot .xbox ul li aside article p span:last-child{
		font-size: 0.1rem;
		color: #ababab;
		font-weight: normal;
	}
	.ufoot .xbox ul li aside article p:nth-child(2){
		margin-top: 0.1rem;
		background-color: #e6e6e6;
		width: 33%;
		height: 0.4rem;
		line-height: 0.4rem;
		margin-right: 0.2rem;
		text-align: center;
		color: #adadad;
	}
</style>
